<template>
	<view class="page-login">


		<view>
			<view class="module-canvans">
				<canvas-drag ref="canvasRef" id="canvas-drag" :graph="graph" 
				    width="750" height="600" enableUndo="true" @getIndex="getIndex"></canvas-drag>
			</view>
			<view class="u-flex bm p15">
				<view @click="popupList=localList,curFiled='local',showPopup=true" class="fz12 mr20">
					位置：{{localList[form.local]}}<u-icon class="ml6 fz10 c9" name="arrow-down-fill"></u-icon></view>
				<view @click="popupList=fuList,curFiled='fu',showPopup=true" class="fz12">辅助线：{{fuList[form.fu]}}<u-icon
						class="ml6 fz10 c9" name="arrow-down-fill"></u-icon></view>
			</view>
			<view class="module-action mt20 pl10 pr10">

				<view class="u-flex u-f-justify">
					<view class="action-item" @click="onAddImage">
						<image src="../../static/image/ic-pic.png"
							style="width:48rpx;height:48rpx;display: block;margin: 0 auto 20rpx;"></image>
						添加图片
					</view>
					<view class="action-item" @click="showAddWord=true">
						<image src="../../static/image/ic-word.png"
							style="width:48rpx;height:48rpx;display: block;margin: 0 auto 20rpx;"></image>
						添加文字
					</view>
					<view class="action-item" @click="showAllPic=true">
						<image src="../../static/image/ic-tu.png"
							style="width:48rpx;height:48rpx;display: block;margin: 0 auto 20rpx;"></image>
						图库
					</view>
				</view>
			</view>
			<view class="fixed-bottom p15">
				<view class="u-flex module-next p15" v-if="curCeng==-1">
					<view class="u-flex u-f-jsb u-f1 pr20">
						<view class="item" :class="[curAction==0?'on':'']" @click="curAction=0">
							<u-icon name="trash"></u-icon>
							<view class="fz12">清空画布</view>
						</view>
						<view class="item" :class="[curAction==1?'on':'']" @click="curAction=1">
							<u-icon name="bookmark"></u-icon>
							<view class="fz12">复制图层</view>
						</view>
						<view class="item" :class="[curAction==2?'on':'']" @click="curAction=2,onExportJSON()">
							<u-icon name="eye"></u-icon>
							<view class="fz12">预览效果</view>
						</view>
					</view>
					<view class="btn-sure" @click="toShow">确定</view>
				</view>
				
				<view class="u-flex u-f-jsb bt pt10 pl20 pr20" style="text-align: center;" v-else>
					<view @click="setWord" v-if="curCengInfo.type=='text'">
						<u-icon name="edit-pen"></u-icon>
						<view>文字颜色</view>
					</view>
					<view @click="setSort(1)">
						<u-icon name="edit-pen"></u-icon>
						<view>上移一层</view>
					</view>
					<view @click="setSort(2)">
						<u-icon name="edit-pen"></u-icon>
						<view>下移一层</view>
					</view>
				</view>
			</view>
		</view>


		<u-picker @confirm="popupConfirm" mode="selector" v-model="showPopup" :range="popupList"></u-picker>
		
		
		<u-modal v-model="showAddWord" title="输入文字" @confirm="onAddText" :showCancelButton='true' negative-top="300px">
			<view class="slot-content">
				<view class="p15">
					<u-input class="u-border" v-model="addWord" placeholder="请输入" type="text" :clearable="false" />
				</view>
			</view>
		</u-modal>
		<u-popup v-model="showTips" mode="center" border-radius="20" :closeable="false">
			<view class="p20" style="width: 600rpx;">
				<image src="../../static/image/ic-first-tips.png"
					style="display: block;margin: 0 auto;width: 72rpx;height: 72rpx;"></image>
				<view class="fz14 p15">
					添加图片即选择为包包正面/背面/侧面/底面打印图片，请上传无版权争议且清晰的图片，上传图片系统将自动进行抠图。
		
		
				</view>
				<button class="bon" @click="showTips=false">确认</button>
			</view>
		</u-popup>
		<u-popup v-model="showAllPic" mode="bottom" border-radius="20" :closeable="false">
			<view>
				<view class="mt10">
					<u-tabs :list="cateList" active-color="#70B52C" :is-scroll="false" :current="current"
						@change="cateChange"></u-tabs>
					<scroll-view scroll-y="true" class="mt20" style="max-height: 600rpx;">
						
							
							<view class="specs mb16 spec-diy" >
								
								<view class="u-flex pl10 pr10" style="flex-wrap: wrap;">
									<view class="sku-item" @click="showAllPic=false" v-for="(item,index) in 6" :key="index">
										
										<view class="sku-item-content">
											
											<image src="../../static/image/pic1.png" style="width:100%" mode="widthFix"></image>
										</view>
									</view>
								</view>
							</view>
						
						
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import canvasDrag from "@/components/canvas-drag/index";
	export default {
		components: {
			canvasDrag
		},
		data() {
			return {
				graph: {},
				curCeng:-1,
				curCengInfo:{},
				canvasBg: "",
				cateList: [{
					name: '分类1'
				}, {
					name: '分类2'
				}],
				showAddWord:false,
				addWord:'',
				current: 0,
				showAllPic:false,
				showPopup: false,
				popupList: [],
				curAction: 0,
				form: {
					local: 0,
					fu: 0
				},
				localList: ['正面', '背面'],
				fuList: ['开', '关'],
				curFiled: 'local',
				showTips: false,
			}
		},
		onLoad(e) {
			if (!this.$db.get('diyFirstTips')) {
				this.showTips = true
				this.$db.set('diyFirstTips', true)
			}
			// this.$nextTick(()=>{
			// 	let temp_theme = [{
			// 	  "type": "text",
			// 	  "text": "helloworl33d",
			// 	  "color": "yellow",
			// 	  "fontSize": 20,
			// 	  "y": 243,
			// 	  "x": 97,
			// 	  "rotate": 0
			// 	},{
			// 	  "type": "text",
			// 	  "text": "helloworld",
			// 	  "color": "blue",
			// 	  "fontSize": 20,
			// 	  "y": 243,
			// 	  "x": 97,
			// 	  "rotate": 0
			// 	}];
			// 	this.$refs.canvasRef.initByArr(temp_theme);
			// })
			
console.log(this.arrIndexExchange([1,2,3,4],1,0))
		},
		methods: {
			getIndex(res){
					console.log(res)
				this.curCeng=res.index
				this.curCengInfo=res.info
			},
			setSort(type){
				
				this.$refs.canvasRef.changSort(this.curCeng,type)
			},
			toShow(){
				
				uni.navigateTo({
					url:'/pages/diy/show'
				})
			},
			cateChange(e){
				this.current=e
			},
			popupConfirm(e) {
				console.log(e, 12)
				let ids = e[0]
				this.form[this.curFiled] = ids
			},
			
			setWord(){
				this.addWord=this.curCengInfo.text
				this.showAddWord=true
			},
			/**
			 * 添加测试图片
			 */
			onAddTest() {
				this.setData({
					graph: {
						w: 120,
						h: 120,
						type: 'image',
						url: "/static/assets/images/test.jpg"
					}
				});
			},

			/**
			 * 添加图片
			 */
			onAddImage() {
				wx.chooseImage({
					success: res => {
						this.setData({
							graph: {
								w: 200,
								h: 200,
								type: 'image',
								url: res.tempFilePaths[0]
							}
						});
					}
				});
			},

			/**
			 * 添加文本
			 */
			onAddText() {
				
				if(this.curCeng==-1){
					
					this.setData({
						graph: {
							type: 'text',
							text: this.addWord
						}
					});
				}else{
					
					this.$refs.canvasRef.changText(this.curCeng,this.addWord)
				}
				 this.addWord=''
			},

			/**
			 * 导出图片
			 */
			onExport() {
				this.$refs.canvasRef.export().then(filePath => {
					console.log(filePath);
					wx.previewImage({
						urls: [filePath]
					});
				}).catch(e => {
					console.error(e);
				});
			},

			/**
			 * 改变文字颜色
			 */
			onChangeColor() {
				this.$refs.canvasRef.changColor('blue');
			},

			/**
			 * 改变背景颜色
			 */
			onChangeBgColor() {
				this.$refs.canvasRef.changeBgColor('yellow');
			},

			/**
			 * 改变背景照片
			 */
			onChangeBgImage() {
				this.$refs.canvasRef.changeBgImage("/static/assets/images/test.jpg")
			},

			/**
			 * 导出当前画布为模板
			 */
			onExportJSON() {
				console.log(this.$refs.canvasRef,1111111111111)
				this.$nextTick(()=>{
					
					this.$refs.canvasRef.exportJson().then(imgArr => {
						console.log(JSON.stringify(imgArr));
					}).catch(e => {
						console.error(e);
					});
				})
			},

			onImport() {
				// 有背景
				// let temp_theme = [{"type":"bgColor","color":"yellow"},{"type":"image","url":"../../assets/images/test.jpg","y":98.78423143832424,"x":143.78423143832424,"w":104.43153712335152,"h":104.43153712335152,"rotate":-12.58027482265038,"sourceId":null},{"type":"text","text":"helloworld","color":"blue","fontSize":24.875030530031438,"y":242.56248473498428,"x":119.57012176513672,"w":116.73966979980469,"h":34.87503053003144,"rotate":8.873370699754087}];
				// 无背景
				let temp_theme = [{
					"type": "image",
					"url": "/static/assets/images/test.jpg",
					"y": 103,
					"x": 91,
					"w": 120,
					"h": 120,
					"rotate": 0,
					"sourceId": null
				}, {
					"type": "text",
					"text": "helloworld",
					"color": "blue",
					"fontSize": 20,
					"y": 243,
					"x": 97,
					"rotate": 0
				}];
				this.$refs.canvasRef.initByArr(temp_theme);
			},

			onClearCanvas: function(event) {
				let _this = this;

				_this.setData({
					canvasBg: null
				});

				this.$refs.canvasRef.clearCanvas();
			},
			onUndo: function(event) {
				this.$refs.canvasRef.undo();
			}

		},
	}
</script>

<style lang="scss">
	.module-canvans {
		background: #f5f5f5;
	}

	.bon {
		width: 100%;
		background: #70B52C;
		padding: 15rpx;
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 10px;
		font-weight: normal;
	}


	.sku-item {
		width: 33.33%;
		min-width: 33.33%;
		color: #888;
		font-size: 24rpx;
		text-align: center;
			margin-bottom: 24rpx;
		.sku-item-content{
			
				border: 1px solid #f5f5f5;
			background: rgba(25,41,28,0.05);
			margin:0 10rpx;
		}
		&.on {
			.sku-item-content{
				
				border: 1px solid #70B52C;
				color: #70B52C;
			}
		}
	}
	.module-action {
		.action-item {

			border-radius: 8rpx;
			border: none;
			background: rgba(25, 41, 28, 0.05);
			color: #19291C;
			padding: 40rpx 20rpx;
			width: 200rpx;
			font-size: 24rpx;
			text-align: center;
			margin: 0 15rpx;

		}
	}

	.btn-sure {

		width: 160rpx;
		text-align: center;
		background: #70B52C;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 10px;
		font-weight: normal;
	}

	.module-next {
		background: rgba(25, 41, 28, 0.05);
		border-radius: 16rpx;

		.item {
			text-align: center;
			font-size: 40rpx;

			&.on {
				color: #FE3307;
			}
		}
	}
</style>